<template>
  <div>
    <div style="height: 60px;display: flex;background-color: white">
      <div
        style="display: flex;align-items: center;padding-left: 20px;background-color: #68a1e1;width: 200px;">
        <img style="width: 40px;height: 40px" src="@/assets/logo.svg">
        <span style="font-size: 30px;margin-left: 3px;">标题</span>
      </div>

      <div
        style="flex: 1 ;display: flex;align-items:center;padding-left: 20px; border-bottom: 1px solid red">
        <span style="margin-right: 5px;cursor: pointer"
              @click="router.push('/manager/home')">首页</span> / <span
        style="margin-left: 5px;cursor: pointer"> {{ router.currentRoute.value.meta.name }}</span>
      </div>
      <div
        style="width: fit-content;display: flex;align-items: center;padding-right: 20px;border-bottom: 1px solid red">
        <el-dropdown>
          <div style="display: flex;align-items: center">

            <img v-if="data.user.avatar" style="width: 40px;height: 40px;border-radius: 50%" :src="data.user?.avatar" >
            <img v-else style="width: 40px;height: 40px;border-radius: 50%" src="@/assets/logo.svg" >
            <span style="margin-left: 5px">{{data.user?.name}}</span>
          </div>
          <template #dropdown>
            <el-dropdown-menu>
              <el-dropdown-item @click="router.push('/manager/person')">个人信息</el-dropdown-item>
              <el-dropdown-item @click="router.push('/manager/updatePassword')">修改密码</el-dropdown-item>
              <el-dropdown-item @click="logout">退出登录</el-dropdown-item>
            </el-dropdown-menu>
          </template>
        </el-dropdown>
      </div>
    </div>

    <div style="display: flex">
      <div style="width: 200px">
        <el-menu router :default-active="router.currentRoute.value.path"
                 style="min-height: calc(100vh - 60px);;border: none">
          <el-menu-item index="/manager/home">
            <el-icon>
              <location/>
            </el-icon>
            <span>首页</span>
          </el-menu-item>
          <el-sub-menu index="1">
            <template #title>
              <el-icon><location/></el-icon>
              <span>图表示例</span>
            </template>
            <el-menu-item index="/echarts/line">折线图</el-menu-item>
            <el-menu-item index="/echarts/bar">柱状图</el-menu-item>
            <el-menu-item index="/echarts/pie">饼状图</el-menu-item>
          </el-sub-menu>
          <el-sub-menu index="2">
            <template #title>
              <el-icon><location/></el-icon>
              <span>系统管理</span>
            </template>
            <el-menu-item index="/manager/notice">公告管理</el-menu-item>
            <el-menu-item index="/manager/admin">管理员信息</el-menu-item>
            <el-menu-item index="/manager/user">普通用户信息</el-menu-item>
          </el-sub-menu>

        </el-menu>
      </div>

      <div style="flex:1;width: 0; margin: 0px;background-color: #f0f1fc;height: 597px;overflow: auto">
        <router-view @updateAccountName="updateAccountName" />
      </div>
    </div>
  </div>
</template>
<script setup lang="ts">

import {Location} from "@element-plus/icons-vue";
// @ts-ignore
import router from "@/router/index"
import {reactive} from "vue";

const data=reactive({
  user:JSON.parse(localStorage.getItem('code_user')||'{}')
})
const logout = () => {
  location.href = "/login"
  localStorage.removeItem('code_user')
}
const updateAccountName = () => {
  data.user=JSON.parse(localStorage.getItem('code_user')||'{}')
}
</script>
<style>
.el-menu {
  background-color: #68a1e1 !important;
}

.el-tooltip__trigger {
  cursor: pointer;
}

.el-menu-item.is-active {
  background-color: white;
}

.el-menu-item:hover {
  background-color: red !important;
}


</style>
